<template>
    <div class="bg">
        <div class="logo">
            Y
        </div>
        <div class="list">
            <div class="item" :class="{selectItem:index == navIndex}" @click="clickIndexNav(navIndex)"  v-for="(i,navIndex) in list">
                {{i.title}}
            </div>
        </div>
    </div>
</template>
<script>
	export default {
		name: "navbar",
        props:{
            index:0
        },
        data(){
            return {
            	list:[

                ]
            }
        },
		created(){
            this.init()
        },
        methods:{
	        clickIndexNav(index){
	        	this.$emit('update:index',index)
	        	let url = this.list[index].router
		        this.$router.push(url)
            },
			init(){
				this.$api.req('get','web/category', {}).then((res)=>{
					this.list = [
                        {
                            title:'首页',
                            router:'/'
                        },
						...res
                    ]
                    console.log('res',res)
                })
            }
        }
	}
</script>

<style scoped lang="scss">
    .bg {
        position: sticky;
        top: 0;
        z-index: 100;

        background:rgba(255,255,255,0.5);
        backdrop-filter: saturate(180%) blur(20px);
        display: flex;
        align-items: center;
        padding: 15px;
        box-shadow: 0 10px 10px rgba(0,0,0,0.1);
        .logo{
            display: flex;
            width: 40px;
            height: 40px;
            font-size: 24px;
            border-radius: 50%;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            background-color: $mainColor;
            border:1px solid $bgColor;
            color: $bgColor;
            margin: 0 15px;
            &:hover{
                opacity: 0.8;
            }
        }
        .list{
            flex: 1;
            display: flex;
            align-items: center;
            color:#999;
            .item{
                cursor: pointer;
                transition: 0.2s;
                padding: 15px;
                &:hover{
                    color: $mainColor;
                }
            }
        }
    }
    .selectItem{
        color: $mainColor;
    }

</style>